import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import '../../../utils/G.dart';

class ProductComment extends StatefulWidget {
  Map detail;
  ProductComment({Key? key, required Map this.detail}) : super(key: key);

  @override
  _ProductCommentState createState() => _ProductCommentState();
}

class _ProductCommentState extends State<ProductComment> {
  @override
  Widget build(BuildContext context) {
    var commentHeader = ListTile(
        title: Flex(
          direction: Axis.horizontal,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('用户评价 (' + widget.detail['replyCount'].toString() + ')'),
            Text(widget.detail['replyChance'].toString() + "% 好评率")
          ],
        ),
        trailing: const Icon(Icons.arrow_forward_ios, size: 16),
        onTap: () {
          // 跳转到商品的评论页面
          Map<String, dynamic> p = {'id': widget.detail['storeInfo']['id']};
          G.router.navigateTo(
              context, '/product_comment' + G.parseQuery(params: p));
        });

    var commentBody = widget.detail['replyCount'] > 0
        ? _renderCommentItem(widget.detail['reply'])
        : const Text('空空如也~');

    return Container(
      child: Column(
        children: [commentHeader, commentBody],
      ),
    );
  }

  Widget _renderCommentItem(Map item) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 10),
      child: Flex(
        direction: Axis.horizontal,
        children: [
          G.imageWidget(item['avatar'], width: 70, height: 70),
          Expanded(
              child: Container(
            height: 70,
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Text(
                      item['nickname'],
                      style: const TextStyle(fontSize: 16),
                      overflow: TextOverflow.ellipsis,
                    ),

                    // 五星评价
                    RatingBar.builder(
                      initialRating:
                          (item['product_score'] + item['service_score']) / 2,
                      itemSize: 16,
                      minRating: 1,
                      direction: Axis.horizontal,
                      allowHalfRating: true,
                      itemCount: 5,
                      itemPadding: const EdgeInsets.symmetric(horizontal: 1.0),
                      itemBuilder: (context, _) => const Icon(
                        Icons.star,
                        color: Colors.amber,
                      ),
                      ignoreGestures: true, // 忽略手势操作
                      onRatingUpdate: (rating) {
                        // print(rating);
                      },
                    ),
                  ],
                ),
                Container(
                  child: Wrap(
                    direction: Axis.horizontal,
                    children: [
                      Text(
                        item['comment'],
                        style: const TextStyle(fontSize: 16),
                      )
                    ],
                  ),
                ),
                Row(
                  children: [
                    Container(
                      child: Text(
                        item['add_time'],
                        style:
                            const TextStyle(fontSize: 14, color: Colors.grey),
                      ),
                    )
                  ],
                )
              ],
            ),
          ))
        ],
      ),
    );
  }
}
